<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员后台管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #2c3e50;
            --secondary: #34495e;
            --accent: #e74c3c;
            --light: #ecf0f1;
            --dark: #2c3e50;
            --success: #2ecc71;
            --warning: #f39c12;
            --info: #3498db;
            --gray: #95a5a6;
            --light-gray: #f5f7fa;
            --border: #e0e6ed;
            --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }

        body {
            background-color: var(--light-gray);
            color: #333;
            overflow-x: hidden;
        }

        .admin-container {
            display: flex;
            min-height: 100vh;
        }

        /* 侧边栏样式 */
        .admin-sidebar {
            width: 250px;
            background: var(--primary);
            color: white;
            padding: 20px 0;
            transition: all 0.3s ease;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            z-index: 1000;
        }

        .admin-logo {
            text-align: center;
            padding: 20px 0;
            border-bottom: 1px solid var(--secondary);
            margin-bottom: 20px;
        }

        .admin-logo h2 {
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .admin-menu {
            list-style: none;
            padding: 0;
        }

        .admin-menu li a {
            display: flex;
            align-items: center;
            padding: 15px 30px;
            color: var(--light);
            text-decoration: none;
            transition: all 0.3s;
            border-left: 4px solid transparent;
            font-size: 1rem;
        }

        .admin-menu li a:hover,
        .admin-menu li a.active {
            background: var(--secondary);
            border-left: 4px solid var(--accent);
        }

        .admin-menu li a i {
            width: 25px;
            text-align: center;
            margin-right: 12px;
            font-size: 1.1rem;
        }

        /* 主内容区样式 */
        .admin-content {
            flex: 1;
            padding: 30px;
            margin-left: 250px;
            transition: margin-left 0.3s;
        }

        .admin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }

        .admin-header h1 {
            font-size: 1.8rem;
            color: var(--dark);
        }

        .admin-header h1 span {
            color: var(--accent);
        }

        .admin-header .date-info {
            font-size: 1.1rem;
            color: var(--gray);
            background: var(--light);
            padding: 8px 15px;
            border-radius: 30px;
            box-shadow: var(--card-shadow);
        }

        /* 统计卡片容器 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            padding: 20px;
        }

        /* 单个统计卡片 */
        .stat-card {
            background: #fff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        /* 图标样式 */
        .stat-card .icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #f0f7ff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1890ff;
            font-size: 20px;
            margin-bottom: 15px;
        }

        /* 标题样式 */
        .stat-card h3 {
            margin: 0 0 10px;
            color: #666;
            font-size: 16px;
            font-weight: 500;
        }

        /* 数值样式 */
        .stat-card .value {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin: 10px 0;
        }

        /* 趋势指示器 */
        .stat-card .trend {
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .stat-card .trend i {
            margin-right: 5px;
        }

        /* 上升趋势样式 */
        .stat-card .trend .fa-arrow-up {
            color: #52c41a;
        }

        /* 下降趋势样式 */
        .stat-card .trend .fa-arrow-down {
            color: #f5222d;
        }

        /* 图表区域 */
        .chart-container {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: var(--card-shadow);
            margin-bottom: 40px;
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .chart-header h2 {
            color: var(--dark);
            font-size: 1.5rem;
        }

        .chart-actions {
            display: flex;
            gap: 15px;
        }

        .chart-actions button {
            background: var(--light);
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 0.9rem;
        }

        .chart-actions button:hover,
        .chart-actions button.active {
            background: var(--accent);
            color: white;
        }

        .chart-wrapper {
            height: 350px;
            position: relative;
        }

        /* 最近活动区域 */
        .activity-container {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: var(--card-shadow);
        }

        .activity-header {
            margin-bottom: 25px;
        }

        .activity-header h2 {
            color: var(--dark);
            font-size: 1.5rem;
        }

        .activity-list {
            list-style: none;
        }

        .activity-item {
            display: flex;
            padding: 20px 0;
            border-bottom: 1px solid var(--border);
        }

        .activity-item:last-child {
            border-bottom: none;
        }

        .activity-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            font-size: 1.2rem;
            color: var(--accent);
        }

        .activity-content {
            flex: 1;
        }

        .activity-title {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 1.1rem;
        }

        .activity-desc {
            color: var(--gray);
            margin-bottom: 8px;
            font-size: 0.95rem;
        }

        .activity-time {
            color: var(--info);
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
    </style>
</head>
<body>
<div class="admin-container">
    <!-- 侧边栏 -->
    <div class="admin-sidebar">
        <div class="admin-logo">
            <h2><i class="fas fa-user-cog"></i> 管理员后台</h2>
        </div>
        <ul class="admin-menu">
            <li><a href="${pageContext.request.contextPath}/dashboard"
                   class="${activeTab == 'dashboard' ? 'active' : ''}"><i class="fas fa-chart-bar"></i> 数据统计</a></li>
            <li><a href="${pageContext.request.contextPath}/userManage"
                   class="${activeTab == 'user' ? 'active' : ''}"><i class="fas fa-users"></i> 用户统计</a></li>
            <li><a href="${pageContext.request.contextPath}/productManage"
                   class="${activeTab == 'product' ? 'active' : ''}"><i class="fas fa-box"></i> 商品统计</a></li>
            <li><a href="${pageContext.request.contextPath}/orderManege"
                   class="${activeTab == 'order' ? 'active' : ''}"><i class="fas fa-shopping-cart"></i> 订单统计</a></li>
            <li><a href="${pageContext.request.contextPath}/logout" id="logoutLink">
                <i class="fas fa-sign-out-alt"></i> 退出登录
            </a></li>
        </ul>
    </div>

    <!-- 主内容区 -->
    <div class="admin-content">
        <div class="admin-header">
            <h1>欢迎回来，<span>${admin.username}</span></h1>
            <div class="date-info">
                <i class="fas fa-calendar-alt"></i> <span id="current-date"></span>
            </div>
        </div>

        <div class="stats-container">
            <!-- 新增用户统计卡片 -->
            <div class="stat-card">
                <div class="icon"><i class="fas fa-user-plus"></i></div>
                <h3>新增用户</h3>
                <div class="value">${stats.newuserCount}</div>
                <div class="trend">
                    <c:choose>
                        <c:when test="${stats.newuserGrowth >= 0}">
                            <i class="fas fa-arrow-up"></i>
                            <fmt:formatNumber value="${stats.newuserGrowth}" pattern="0.0"/>% 增长
                        </c:when>
                        <c:otherwise>
                            <i class="fas fa-arrow-down"></i>
                            <fmt:formatNumber value="${-stats.newuserGrowth}" pattern="0.0"/>% 下降
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>

            <!-- 商品统计卡片 -->
            <div class="stat-card">
                <div class="icon"><i class="fas fa-box"></i></div>
                <h3>新增商品</h3>
                <div class="value">${stats.newproductCount}</div>
                <div class="trend">
                    <c:choose>
                        <c:when test="${stats.newproductGrowth >= 0}">
                            <i class="fas fa-arrow-up"></i>
                            <fmt:formatNumber value="${stats.newproductGrowth}" pattern="0.0"/>% 增长
                        </c:when>
                        <c:otherwise>
                            <i class="fas fa-arrow-down"></i>
                            <fmt:formatNumber value="${-stats.newproductGrowth}" pattern="0.0"/>% 下降
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>

            <!-- 订单统计卡片 -->
            <div class="stat-card">
                <div class="icon"><i class="fas fa-shopping-cart"></i></div>
                <h3>今日订单</h3>
                <div class="value">${stats.todayOrderCount}</div>
                <div class="trend">
                    <c:choose>
                        <c:when test="${stats.todayOrderGrowth >= 0}">
                            <i class="fas fa-arrow-up"></i>
                            <fmt:formatNumber value="${stats.todayOrderGrowth}" pattern="0.0"/>% 增长
                        </c:when>
                        <c:otherwise>
                            <i class="fas fa-arrow-down"></i>
                            <fmt:formatNumber value="${-stats.todayOrderGrowth}" pattern="0.0"/>% 下降
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>

            <!-- 销售额统计卡片 -->
            <div class="stat-card">
                <div class="icon"><i class="fas fa-comment-dollar"></i></div>
                <h3>今日成交额</h3>
                <div class="value">¥<fmt:formatNumber value="${stats.todaySales}" pattern="0.0"/></div>
                <div class="trend">
                    <c:choose>
                        <c:when test="${stats.todaySalesGrowth >= 0}">
                            <i class="fas fa-arrow-up"></i>
                            <fmt:formatNumber value="${stats.todaySalesGrowth}" pattern="0.0"/>% 增长
                        </c:when>
                        <c:otherwise>
                            <i class="fas fa-arrow-down"></i>
                            <fmt:formatNumber value="${-stats.todaySalesGrowth}" pattern="0.0"/>% 下降
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="chart-container">
            <div class="chart-header">
                <h2>销售数据统计</h2>
                <div class="chart-actions">
                    <button class="active">周</button>
                    <button>月</button>
                    <button>分类</button>
                </div>
            </div>
            <div class="chart-wrapper">
                <canvas id="salesChart"></canvas>
            </div>
        </div>

        <!-- 最近活动 -->
        <div class="activity-container">
            <div class="activity-header">
                <h2>最近活动</h2>
            </div>
            <ul class="activity-list">
                <c:forEach items="${activities}" var="activity">
                    <li class="activity-item">
                        <div class="activity-icon">
                            <c:choose>
                                <c:when test="${activity.activityType == 'USER_REGISTER'}">
                                    <i class="fas fa-user-plus"></i>
                                </c:when>
                                <c:when test="${activity.activityType == 'ORDER_CREATE'}">
                                    <i class="fas fa-shopping-cart"></i>
                                </c:when>
                                <c:when test="${activity.activityType == 'PRODUCT_ADD'}">
                                    <i class="fas fa-box"></i>
                                </c:when>
                                <c:otherwise>
                                    <i class="fas fa-bell"></i>
                                </c:otherwise>
                            </c:choose>
                        </div>
                        <div class="activity-content">
                            <div class="activity-title">
                                <c:choose>
                                    <c:when test="${activity.activityType == 'USER_REGISTER'}">新用户注册</c:when>
                                    <c:when test="${activity.activityType == 'ORDER_CREATE'}">新订单创建</c:when>
                                    <c:when test="${activity.activityType == 'PRODUCT_ADD'}">商品上架</c:when>
                                    <c:otherwise>系统活动</c:otherwise>
                                </c:choose>
                            </div>
                            <div class="activity-desc">
                                <c:if test="${not empty activity.username}">
                                    用户 "${activity.username}"
                                </c:if>
                                    ${activity.description}
                            </div>
                            <div class="activity-time">
                                <i class="far fa-clock"></i>
                                <fmt:formatDate value="${activity.createdAt}" pattern="yyyy-MM-dd HH:mm:ss"/>
                            </div>
                        </div>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>
</div>

<script>
    // 显示当前日期和星期
    function updateCurrentTime() {
        const now = new Date();

        // 配置日期和星期显示格式
        const options = {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            weekday: 'long',  // 显示完整的星期（如“星期一”）
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false      // 24小时制
        };

        // 转换为本地化字符串（中文）
        const dateTimeStr = now.toLocaleString('zh-CN', options);

        // 更新到页面
        document.getElementById('current-date').textContent = dateTimeStr;
    }

    // 初始化并每秒更新
    updateCurrentTime();
    setInterval(updateCurrentTime, 1000);

    let currentChart = null;

    // 加载图表数据
    function loadChartData(type) {
        const safetype = encodeURIComponent(type);
        fetch("/chartData?type=" + safetype)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(data => {
                if (currentChart) {
                    currentChart.destroy();
                }

                const ctx = document.getElementById('salesChart').getContext('2d');
                const isCategoryChart = type === 'category';
                const isWeeklyChart = type === 'week';
                const isMonthlyChart = type === 'month';

                // 根据图表类型配置不同的选项
                const chartConfig = {
                    type: isCategoryChart ? 'bar' : 'line',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: isCategoryChart ? '各分类销售额 (¥)' :
                                isWeeklyChart ? '周销售额 (¥)' : '月销售额 (¥)',
                            data: data.data,
                            backgroundColor: isCategoryChart ? [
                                'rgba(231, 76, 60, 0.1)',
                                'lightblue',
                                'lightsalmon',
                                'lightyellow',
                                'lightcoral',
                                'lightpink',
                                'lightgray',
                                'lightgrey',
                            ] : 'rgba(231, 76, 60, 0.1)',
                            borderColor: '#e74c3c',
                            borderWidth: isCategoryChart ? 1 : 3,
                            pointBackgroundColor: '#fff',
                            pointBorderColor: '#e74c3c',
                            pointBorderWidth: 2,
                            pointRadius: 5,
                            pointHoverRadius: 7,
                            fill: !isCategoryChart,
                            tension: 0.3
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    label: function (context) {
                                        return '销售额: ¥' + context.raw;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function (value) {
                                        return '¥' + value;
                                    }
                                }
                            },
                            x: {
                                grid: {
                                    display: !isCategoryChart
                                }
                            }
                        }
                    }
                };

                // 如果是月数据，可能需要调整x轴显示
                if (isMonthlyChart && data.labels.length > 10) {
                    chartConfig.options.scales.x.ticks = {
                        autoSkip: true,
                        maxTicksLimit: 10
                    };
                }

                currentChart = new Chart(ctx, chartConfig);
            })
            .catch(error => {
                console.error('获取图表数据失败:', error);
                alert('加载图表数据失败，请稍后重试');
            });
    }

    // 初始化加载周数据
    loadChartData('week');

    // 按钮事件绑定
    document.querySelectorAll('.chart-actions button').forEach((button, index) => {
        button.addEventListener('click', function () {
            document.querySelectorAll('.chart-actions button').forEach(btn => {
                btn.classList.remove('active');
            });
            this.classList.add('active');

            const types = ['week', 'month', 'category'];
            loadChartData(types[index]);
        });
    });
</script>
</body>
</html>